<template>
  <a-modal
    :title="`${model ? '编辑' : '新增'}账号`"
    :width="640"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form :form="form" v-bind="formLayout">
        <a-form-item v-show="false" label="主键ID">
          <a-input v-decorator="['uid', { initialValue: 0 }]" disabled />
        </a-form-item>
        <a-form-item label="用户名">
          <a-input
            v-decorator="['name', { rules: [{ required: true, message: '请输入登录用户名！' }] }]"
            placeholder="登录用户名"
          />
        </a-form-item>
        <a-form-item label="密码">
          <a-input v-decorator="['password']" placeholder="密码" />
        </a-form-item>
        <a-form-item label="手机号">
          <a-input
            v-decorator="['mobile', { rules: [{ required: true, message: '请输入手机号！' }] }]"
            placeholder="手机号"
          />
        </a-form-item>
        <a-form-item label="性别">
          <a-select v-decorator="['sex', { initialValue: 1 }]" placeholder="请选择性别">
            <a-select-option :value="1">男</a-select-option>
            <a-select-option :value="2">女</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="角色">
          <a-select
            v-decorator="['role_id', { rules: [{ required: true, message: '请选择角色！' }] }]"
            placeholder="请选择角色"
          >
            <a-select-option :value="item.id" v-for="item in roleList" :key="item.id">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import formModalMixin from '@/mixins/formModalMixin'
import { managerAdd, managerEdit } from '@/api/manage'
import { getRoleList } from '@/api/role'
const fields = ['name', 'password', 'mobile', 'sex', 'role_id', 'uid']
export default {
  mixins: [formModalMixin],
  data () {
    this.fields = fields
    this.addAction = managerAdd
    this.editAction = managerEdit
    return {
      roleList: []
    }
  },
  created () {
    getRoleList().then(res => {
      this.roleList = res.data.data
    })
  }
}
</script>
